let image_list = [
  'https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80',
  'https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
  'https://images.unsplash.com/photo-1599423300746-b62533397364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
  'https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80',
]

let image_container = document.querySelector('.image_container')
let prev_btn = document.querySelector('.prev')
let next_btn = document.querySelector('.next')
function createdImgBox() {

  image_list.forEach(el=>{
    let img = document.createElement('img')
    img.src = el

    image_container.appendChild(img)
  })
}

createdImgBox()

let current = 0

let timer = setInterval(run, 2000)

function run(){
  current++
  change()
}


next_btn.addEventListener('click',function(){
  current++
  change()
  resetInterval()
})


prev_btn.addEventListener('click',function(){
  current--
  change()
  resetInterval()
})


function change(){
  if (current > image_list.length - 1) {
    current = 0
  }else if(current < 0){
    current = image_list.length - 1
  }
  image_container.style.transform = `translateX(${-current * 600}px)`
}


function resetInterval(){
  clearInterval(timer)
  timer = setInterval(run, 2000)
}

